<template>
	<view class="" style="background-color: #f8f8f8;">
		<view  :style="{backgroundImage:'url('+photo_cdn+'zpupload/static/bbs/sortInfobg.png)'}"  style="width: 100%; height: 25vh;display: flex; align-items: center;justify-content: center;">
				<view style="display: flex; justify-content: center;align-items: center; width: 100%;">
					<view style="display: flex; width: 60%; align-items: center;">
						
						<view class="">
							<image :src="photo_cdn + sort.logo" mode="" style="width: 160rpx; height: 160rpx; border-radius: 15%;" ></image>
						</view>
						<view class="" style="font-weight: bold;font-size: 30rpx; margin-left: 25rpx;">
							<view style="display: flex;">
								<view class="">成员数</view>
								<view class="" style="color: #F1C042;">{{user_num || '0'}}</view>
							</view>
							<view class="" style="display: flex;">
								<view class="">人气</view>
								<view class="" style="color: #F1C042;" >{{view || '0'}}</view>
							</view>
							<view class="" style="display: flex;">
								<view class="">贡献榜</view>
								<view class="" v-for="(item1,index) in users" :key="index" >
									<image :src="photo_cdn+ item1.avatar" style="width: 28rpx; height: 28rpx;border-radius: 15rpx;" ></image>
								</view>
								<view class="" style="background-color: #B13B3B; border-radius: 30rpx;font-size: 16rpx; color: #fff; display: flex; justify-content: center;align-items: center;padding-left: 15rpx; padding-right: 15rpx;">
									{{user_num || '0'}}人
								</view>
							</view>
						</view>
						
					</view>
					
					<view class="" style="margin-left: 40rpx; font-weight: 600;">
						<view class="" style="font-size: 35rpx; border: 5rpx solid #B13B3B; width: 100%;background:rgba(255,255,255,0.35); color: #B13B3B; padding-left: 40rpx; padding-right: 40rpx;padding-top: 10rpx; padding-bottom: 10rpx; border-radius: 25rpx;">
							加入
						</view>
					</view>
				</view>
		</view>
		
		
		<view class="" style="display: flex; justify-content: space-around;margin-top: 25rpx;">
			<view class=""  v-for="(item,index) in tablist" :key="index">
				<view class="" style="display: flex;justify-content: center;">
					<image :src="photo_cdn+ item.img" mode="" style="width: 60rpx;height: 60rpx; " ></image>
				</view>
				<view class="" style="font-size: 35rpx; display: flex;justify-content: center;">
					{{item.title}}
				</view>
				<view class="" style="display: flex;justify-content: center; font-weight: bold; " > 
					{{item.num}}
				</view>
			</view>
		</view>
		
		<view class="" style="display: flex; justify-content: space-between; padding-left: 20rpx; padding-right: 20rpx; font-weight: bold;margin-top: 25rpx;">
			<view class="" style="font-size: 35rpx;">
				圈子贡献榜
			</view>
			<view class="" style="color: #9B9B9B;">
				更多>
			</view>
		</view>
		
		<view style="padding-left: 25rpx; padding-right: 25rpx; ">
			<view style=" border-radius: 25rpx; display: flex; background-color: #fff;">
				<view v-for="(item1,index) in users" :key="index"  style="display: flex; align-items: center; margin-left: 15rpx; margin-right: 15rpx; padding: 10rpx; padding-top: 25rpx; padding-bottom: 15rpx;">
					<view class="">
						<view style="display: flex; justify-content: center;">
							<image :src="photo_cdn+ item1.avatar" style="width: 100rpx; height: 100rpx;border-radius: 50%;" ></image>
						</view>
						<view class="" style="font-size: 35rpx; display: flex; justify-content: center; ">
							{{item1.nickname}}
						</view>
						<view style="display: flex;" >
							贡献：{{item1.id}}
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<view @tap="jump('/pages/bbs/sort/sort?id='+sort.id)" class="" style="display: flex; justify-content: space-between; padding-left: 20rpx; padding-right: 20rpx; font-weight: bold;margin-top: 45rpx;">
			<view class="" style="font-size: 35rpx;">
				圈子活动
			</view>
			<view class="" style="color: #9B9B9B;">
				更多>
			</view>
		</view>
		
		<view  style="display: flex; flex: 1;width: 750rpx;padding: 25rpx; ">
			<swiper style="width: 100%;background-color: #fff; "   :indicator-dots="true"  circular>
				<swiper-item  v-for="(item,index) in tablist" :key="index" :item-id="item.id">
					<view style="padding: 25rpx; display: flex;align-items: center; justify-content: space-between;">
						<view>
							<view style="font-size: 45rpx;">
								寻找祖先某某的活动
							</view>
							<view style="font-size: 20rpx;">
								报名截止时间:2023-01-01 10:20:30
							</view>
							<view style="display: flex; justify-content: space-around;align-items: center;">
								
								<view class="" style="font-size: 30rpx; padding-left: 45rpx; padding-right: 45rpx; padding-top: 15rpx; padding-bottom: 15rpx; border: 1rpx solid #B13B3B; background-color: #B13B3B; border-radius: 45rpx; color: #fff; display: flex; justify-content: center; ">
									报名
								</view>
								
								<view class="">
									<view class="" >
										<image :src="photo_cdn+ item.img" style="width: 35rpx; height: 35rpx;border-radius: 15rpx;" ></image>
									</view>
								</view>
								
							</view>
						</view>
						<view class="">
							<view style="display: flex; justify-content: center;">
								<image :src="photo_cdn+ item.img" style="width: 180rpx; height: 180rpx;border-radius: 15%;" ></image>
							</view>
							
						</view>
					</view>					
				</swiper-item>
			</swiper>
		</view>
		
		<view class="" style="display: flex; justify-content: space-between; padding-left: 20rpx; padding-right: 20rpx; font-weight: bold;margin-top: 45rpx;">
			<view class="" style="font-size: 35rpx;">
				话题
			</view>
			<view class="" style="color: #9B9B9B;">
				更多>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {bbsGetSortInfo,bbssetContentReply} from "@/utils/api/bbs.js";
	import config from "@/utils/config.js";
	let {photo_cdn} = config.baseUrl;
	export default {
		data() {
			return {
				photo_cdn,
				indexId:null,
				sort:{
					logo:null,
				},
				list:[
					{
						agree:null
					}
				],
				user_num:null,
				users:[
					{avatar:null}
				],
				view:null,
				
				
				tablist:[
					{
						img:'zpupload/static/bbs/Communication1.png',
						title:'话题',
						num:100
					},
					{
						img:'zpupload/static/bbs/Communication1.png',
						title:'资料',
						num:1
					},
					{
						img:'zpupload/static/bbs/Communication1.png',
						title:'圈子人脉',
						num:102
					},
					{
						img:'zpupload/static/bbs/Communication1.png',
						title:'活动',
						num:2
					}
				]
			}
		},
		onLoad(option) {
			console.log(option.id);
			console.log(this.photo_cdn)
			this.indexId = option.id;
			this.getList();
		},
		methods: {
			getList(){
				bbsGetSortInfo({
					id:this.indexId
				}).then(res=>{
					console.log(res)
					this.sort= res.data.sort;
					this.list = res.data.list;
					this.user_num = res.data.user_num;
					this.users = res.data.users;
					this.view = res.data.view;
					let Pagename = res.data.sort.name
					uni.setNavigationBarTitle({
						title:Pagename,
					})
				})
			},
			//跳转
			jump(e){
				console.log(e)
				uni.navigateTo({
					url:e
				})
			},
		}
	}
</script>

<style>

</style>
